/*
预览轨迹
map  地图实例
data 数据列表
*/
import EventEmitter from '@/utils/eventEmitter'
import GPS from '@/utils/gps'
export default class PreviewPath extends EventEmitter {

    // type: normal, xlc,
  constructor(map, data, type='normal', eventData=[]) {
    super()
    this.map = map;
    this.dataList = data;
    this.infowindow = null
    this.type = type;
    this.eventData = eventData;

    if(this.type == 'normal') {
        this.init()
    }else{
        this.initXLC()
    }
  }

  markersLayer = []
  polylineLayer = null
  init() {
    if(!this.infowindow) {
      this.infowindow = new AMap.InfoWindow({isCustom: true, offset: [0, -8]})
      window.closeInfowindow = ()=> {
        this.infowindow.close()
      }
    }
    const pathList = []
    this.dataList.forEach(item => {
      const latlng = GPS.WGS84toGCJ02(item.longitude, item.latitude)
      item.latlng = latlng;
      pathList.push(latlng)
      const marker = this.createMarker(item)
      this.markersLayer.push(marker)
    })

    this.polylineLayer = this.createPolyline(pathList)
    this.map.add(this.polylineLayer)
    this.map.add(this.markersLayer)
    this.map.setFitView()
  }

  initXLC() {
    // console.log('datalist---',this.dataList)
    const pathList = []
    this.dataList.forEach(item => {
        if(item.location) {
            const latlng = GPS.WGS84toGCJ02(...item.location.split(','))
            item.latlng = latlng;
            // console.log(item)
            pathList.push(latlng)
        }
    })

    if(this.eventData.length) {
        this.eventData.forEach((item,index) => {
            if(item.location && item.location.includes(',')) {
                const latlng = GPS.WGS84toGCJ02(...item.location.split(','))
                item.latlng = latlng;
                const marker = this.createWarnMarker(item)
                this.markersLayer.push(marker)
            }
        })
        this.map.add(this.markersLayer)
    }
    this.polylineLayer = this.createPolyline(pathList)
    this.map.add(this.polylineLayer)
    
    this.map.setFitView()
  }

  createWarnMarker(item) {
    const icon = require('@/assets/images/icon-danger.png');
    const marker = new AMap.Marker({
      position: item.latlng,
      icon: new AMap.Icon({
        image: icon,
        size: [20,20],
        imageSize: [20,20]
      }),
      offset: [-10,-10],
      title: item.typeName,
      extData: {...item}
    })

    marker.on("click", _=> {
      this.emit("clickMarker",item)
    })

    return marker;
  }

  createMarker(item) {
    const runIcon = require('@/assets/images/move-rate.png');
    const clockIn = require('@/assets/images/clock-in.png')
    const clockOut = require('@/assets/images/clock-out.png')

    let icon = new AMap.Icon({
        image: runIcon,
        size: [20,20],
        imageSize: [20,20]
    })

    const marker = new AMap.Marker({
      position: item.latlng,
      icon: icon,
      offset: [-10,-10],
      angle:item.direction,
      title: item.gmtReport,
      extData: {...item}
    })

    marker.on("click", _=> {
      this.setInfowindow(item)
    })

    return marker;
  }

  createPolyline(path) {
    const polyline = new AMap.Polyline({
      path,
      strokeColor: '#28F',
			strokeWeight: 6,
			strokeOpacity: 1,
			showDir:true,
			zIndex: 200
    })
    return polyline;
  }

  setInfowindow(item) {
    const content = `<div class="x-infowindow-wrap">
      <div class="x-close-infowin" onclick="closeInfowindow()">×</div>
      <div class="x-layout-warp">
        <div class="x-row">
          <span class="x-label">时间：</span>
          <span class="x-value">${item.gmtReport}</span>
        </div>
        <div class="x-row">
          <span class="x-label">经度：</span>
          <span class="x-value">${item.longitude}</span>
        </div>
        <div class="x-row">
          <span class="x-label">纬度：</span>
          <span class="x-value">${item.latitude}</span>
        </div>
        <div class="x-row">
          <span class="x-label">速度：</span>
          <span class="x-value">${item.speed}</span>
        </div>
      </div>
    </div>`

    this.infowindow.setContent(content)
    this.infowindow.open(this.map, item.latlng)
  }

  destroy() {
    this.infowindow && this.infowindow.getIsOpen() && this.infowindow.close();
    if(this.markersLayer.length) {
        this.map && this.map.remove(this.markersLayer)
        this.markersLayer.length = 0
    }
    if(this.polylineLayer) {
        this.map && this.map.remove(this.polylineLayer)
        this.polylineLayer = null
    }
  }
}
